<template>
	<section class="wrapper">
		<div style="padding: 20px;">
			<div class="top_div">
				<i @click="$router.back()" class="iconfont icon24px icon-circle-left" style="color: #333;"></i>
				<h2>{{$t('title_text.Automatically_Publish_videos_title')}}</h2>
			</div>
			<div class="bottom_div">
				<div>
					<div class="flex_between_center">
						<p>任务名称</p>
						<el-popover class="box-item" title="Title" content="Top Center prompts info" placement="top">
							<template #reference>
								<el-icon size="20" style="cursor: pointer;">
									<QuestionFilled />
								</el-icon>
							</template>
						</el-popover>
					</div>
					<el-input size="large" v-model="state.task_name" placeholder="请输入任务名称" />
				</div>
				<div>
					<p>选择账号池</p>
					<el-select size="large" v-model="state.account_number_value" placeholder="请选择">
						<el-option v-for="item in state.account_number_list" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div>
					<p>随机文案标题</p>
					<el-input size="large" v-model="state.senior_copywriter" :autosize="{ minRows: 2, maxRows: 4 }"
						type="textarea" placeholder="#开始 空格结束为一条文案,可输入多条文案" />
				</div>
				<div>
					<p>定位</p>
					<el-select size="large" v-model="state.location_value" placeholder="请选择">
						<el-option v-for="item in state.location_list" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div>
					<p>单个账号发布数量</p>
					<el-input size="large" type="number" v-model="state.single_issue_number"
						placeholder="请输入单个账号发布数量" />
				</div>
				<div>
					<p>账号数量</p>
					<el-input size="large" type="number" v-model="state.account_number" placeholder="请输入账号数量" />
				</div>
				<div>
					<p>视频类别</p>
					<el-select size="large" v-model="state.video_category_value" placeholder="请选择">
						<el-option v-for="item in state.video_category_list" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div>
					<p>任务类型</p>
					<el-select size="large" v-model="state.task_type_value" placeholder="请选择">
						<el-option v-for="item in state.task_type_list" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div>
					<p>选择设备</p>
					<el-select size="large" v-model="state.equipment_value" placeholder="请选择">
						<el-option v-for="item in state.equipment_list" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="bottom_btn">
				<el-button type="primary" style="padding: 15px 40px;">立即发布</el-button>
			</div>
		</div>
	</section>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
		getCurrentInstance,
		watch,
	} from 'vue';
	import request from '@/utils'
	import {
		ElMessage,
		ElMessageBox,
		ElLoading,
		ElIcon
	} from 'element-plus';
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const state = reactive({
		task_name: '', //任务名称
		account_number_value: '',
		account_number_list: [],
		senior_copywriter: '', //文案输入值
		location_value: '', //定位选择值
		location_list: [], //定位数组值
		single_issue_number: null,
		account_number: null,
		video_category_value: '',
		video_category_list: [],
		task_type_value: '',
		task_type_list: [],
		equipment_value: '',
		equipment_list: []
	})
</script>

<style lang="less" scoped>
	h2 {
		margin: 0;
		margin-left: 10px;
	}

	.wrapper {
		height: 100%;
		background-color: #fff;
		border-radius: 10px;
		position: relative;

		.top_div {
			display: flex;
			align-items: center;
			padding-top: 10px;
			padding-bottom: 20px;
			padding-left: 10px;
			border-bottom: 1px solid #ececec;
			i{
				cursor: pointer;
			}
		}

		.bottom_div {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30px 10px;

			>div {
				width: 30%;
				text-align: left;
				margin-bottom: 20px;

				p {
					margin-bottom: 10px;
				}
			}
		}
	}

	.bottom_btn {
		position: absolute;
		right: 30px;
		bottom: 30px;
	}
	/deep/ .el-popper{
		padding: 10px !important;
	}
</style>